<template>
  <div class="p-4">
    <Description @register="registerDescripton" />
  </div>
</template>
<script setup lang="ts">
  import { Description } from '/@/components/Description/index';
  import { useDescription } from '/@/components/Description';
  import { onMounted, ref, computed, watch, unref } from 'vue';
  import { DescItem } from '/@/components/Description/index';
  const props = defineProps({
    isComponent: {
      type: Boolean,
      default: true,
    },
    entityType: {
      type: String,
      default: '',
    },
    entityId: {
      type: String,
      default: '',
    },
    detailSchema: {
      type: Array<DescItem>,
      default: [],
    },
    detailData: {
      type: Object,
      default: () => ({}),
    },
  });
  const emit = defineEmits(['set-desc-data']);
  const data = ref<any>(props.detailData);
  const [registerDescripton, { setDescProps }] = useDescription();
  const getData = computed(() => {
    return unref(data);
  });

  watch(
    () => props.detailData,
    async (nVal) => {
      data.value = nVal;
      emit('set-desc-data', unref(getData));
    },
    { deep: true, immediate: false },
  );

  watch(
    () => getData,
    () => {
      setDescProps({
        schema: props.detailSchema,
        data: getData,
      });
    },
    { deep: true, immediate: false },
  );

  onMounted(async () => {
    if (props.isComponent) {
      setDescProps({
        layout: 'horizontal',
        size: 'middle',
        column: 2,
        labelStyle: {
          fontWeight: 400,
          fontSize: '14px',
          marginTop: '20px',
        },
        contentStyle: {
          fontWeight: 400,
          fontSize: '14px',
        },
        class: 'detail-box',
      });
    }
  });
</script>

<style lang="less" scoped>
  html[data-theme='dark'] {
    .detail-box :deep(.ant-descriptions-item-content) {
      background-color: #000;
      color: #c9d1d9;
    }
  }

  html[data-theme='light'] {
    .detail-box :deep(.ant-descriptions-item-content) {
      background-color: #fff;
    }
  }
</style>
